<template>
    <div>
        <router-view/>
        <div class="mobile-nav">
          <ul>
            <li v-for="(item, index) in navItems" :key="index" :class="[active==item.path?'active':'']">
              <div @click="navigate(item.path)"> 
                <div><i :class="item.icon"></i></div>
                <span>{{ item.title }}</span>
              </div>
            </li>
          </ul>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: "",
            navItems: [
              { title: '提交', path: 'details', icon:"el-icon-chat-line-round" },
              { title: '教程', path: 'course', icon:"el-icon-takeaway-box" },
              { title: '我的', path: 'user' ,icon:"el-icon-user"},
            ]
        }
    },
    created() {
      console.log()
      this.active = this.$route.name
    },
    methods: {
        navigate(path) {
      // 使用 Vue Router 的 push 方法或者其他路由策略
      this.$router.push({name:path});
      this.active = path
        }
    }
}
</script>

<style lang="less" scoped>
.mobile-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  li {
    text-align: center;
    i {
      font-size: 26px;
    }
    font-size: 12px;
  }
  li.active {
    i {
      color: #029e17;
    }
  }
}
.mobile-nav li {
  padding: 10px;
  color: #4e4e4e;
}
</style>